<template>
  <div>
    <nav-header />
    <nav-main />
    <nav-footer />
    <div>{{list}}</div>
  </div>
</template>

<script>
import NavHeader from '@/components/navHeader/NavHeader'
import NavMain from '@/components/navMain/NavMain'
import NavFooter from '@/components/navFooter/NavFooter'
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'Main', // 组件名称
  // 接收父组件的数据
  props: {

  },
  // 定义子组件
  components: {
    NavHeader,
    NavMain,
    NavFooter
  },
  // 注意：vue3.0中，没有this
  setup (props, ctx) {
    let store = useStore()
    // commit调用mutations中的方法，dispatch调用action中的方法
    console.log(store);
    let list = computed(() => {
      return store.state.list
    })
    return {
      list
    }
  }
})
</script>

<style lang="scss" scoped>
</style>